<!-- 赛事信息界面 -->
<template>
    <div
      class="
        venue-display
        flex flex-direction
        strut-absolute
        padding-top-xl padding-lr-xl padding-bottom-xs
      "
      style="overflow-y: scroll; overflow-x: hidden; height: 100%"
    >
    <el-form :model="userInfo"  label-width="150px" style="width:800px" :disabled="editAble">
      <el-form-item label="姓名">
        <el-input v-model="userInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userInfo.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="userInfo.number"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="userInfo.major"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="userInfo.className"></el-input>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input v-model="userInfo.info"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="update()">修改</el-button>
      </el-form-item>
    </el-form>
    </div>
  </template>
  
  <script>
  
  import { getUserInfo,editUser } from '@/api/user';
  export default {
    data() {
      return {
        userInfo: {},
        editAble: true,
      }
    },
  
    mounted() {
      this.editAble = this.$route.query.editAble
      if(this.$route.query.userId != null || this.$route.query.userId != undefined){
        this.userId = this.$route.query.userId
      } else{
        // 获取自身id
        this.userId = JSON.parse(localStorage.getItem('userInfo')).id
      }
      this.getUserInfo(this.userId)
      
  
    },
    methods: {
        getUserInfo(userId) {
            getUserInfo(userId).then(res => {
                this.userInfo = res.data.data;
                console.log(this.userInfo);
            })
        },
        update() {
          editUser(this.userInfo).then(res => {
            this.$message({
                message:res.data.data,
                type:'success'
                })
          })
        }
    },
    destroyed() {
    },
    components: {
    }
  }
  </script>
  <style scoped>
  .el-form-item {
    margin-bottom: 50px;
  }

  .el-form-item .is-disabled {
    background-color: white;
    border-color: white;
    color:white;
  }
  </style>
  